<template>
  <!-- 首页 -->
  <div>
    <div class="hilton-index">
      <!-- 首页视频展示 -->
      <div class="hilton_index_video">
        <div class="index_video">
          <img src="/img/food/back.jpg" alt="" width="100%">
        </div>

        <div class="hilton_index_title">
          <span>北京</span>
          <h1>餐饮美食</h1>
          <div class="hilton_index_video_text">
            <span>+86 10 5695 8888</span>
            <span>位置</span>
            <span>联系我们</span>
          </div>
        </div>
      </div>
      <div class="explore_more">
        <span>向下滚动探索更多</span>
      </div>



    <div class="index_introduce">
        <p>北京商业区的静谧桃源</p>
      </div>

      <!-- 客房与套房 -->
      <template>
        <swiper class="swiper" :options="swiperOption" ref="swiper">
          <swiper-slide v-for="(item, i) in imgs" :key="i">
            <div class="index_carousel">
              <img :src="`img/food/${item.img}`" alt="" />
              <div class="swiper_title">
                <span>{{ item.title }}</span>
                <p>{{ item.detail }}</p>
              </div>
              <div class="swiper_price">
                <span>详情</span>
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </template>
    
    </div>
        <!-- 特色体验 -->
    <div class="experience">
      <div class="experience_img">
        <img src="img/food/food.jpg" alt="" width="100%" />
      </div>
      <div class="experience_title">
        <div>
          <span>探索本地特色主食</span>
          <p>
            以匠心创造，从美味出发，因情怀动人。与挚爱亲朋共享由主厨 Martin Ma 精选的北京地道美食 — 老北京炸酱面。这款鲜香美味的主食在 Opus 酒廊供应，以怀旧意趣、本地特色和新鲜风味著称。
          </p>
        </div>
      </div>

      
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      // 轮播图
      imgs: [
        {
          num: 0,
          title: "茶园",  
          img: "tea.jpg",
          detail:
            "坐落在 21 层楼高的中庭底部，茶园为客人留得一片私密清幽之地。一壶紫茶在手中，色青味甘满清香。无论是要寻找轻松悠闲的私人时光，还是良朋共聚畅快聊天，都能沉浸于经典传承的传统茶文化之美，感受来自中国及异域的珍稀优品香茗。",
        },
        {
          num: 1,
          title: "粤菜",
          img: "yuecai.jpg",
          detail:
            "此魅力无穷的中餐厅装潢极富吸引力，是北京餐厅中高端商务宴请及重要社交活动的首选。经验丰富的大厨为您精心奉上精湛的厨艺和优质的食材，从而展现粤菜的精髓和地方菜系的原汁原味，令味蕾彻底绽放。餐厅设有八间包厢，其中包含两间 VIP 包厢，尊享私密空间，奢华气派不言而喻。",
        },
        {
          num: 2,
          title: "意大利菜",
          img: "italy.jpg",
          detail:
            "Mio 在意大利文中是我的意思,换句话说,这里就是我的意大利餐厅,这家北京意大利餐厅拥有清雅脱俗的设计，温馨友善的氛围，让您轻松感受在家里用餐的悠闲自在。拥有两个开放式厨房,现场烤制披萨。Mio 提供创意意大利美食和各式小食。无论何种选择，都能让人全情满载意国滋味新体验",
        },
        {
          num: 3,
          title: "大堂酒廊",
          img: "hall.jpg",
          detail:
            "优雅舒适的环境，配以富有特色的中国风景艺术画作，宽敞的两层楼空间设计，为您提供香浓咖啡、中西式美食及下午茶，是时尚达人社交聚会的理想场所。",
        },
        {
          num: 4,
          title: "大堂酒吧",
          img: "pub.jpg",
          detail:
            "风格独具的Opus大堂酒廊为北京的夜生活带来精彩纷呈的崭新面貌。在优雅的俱乐部氛围品尝特色鸡尾酒或是上等佳酿，伴随曼妙的音乐旋律开启美妙的夜晚",
        },
      ],
      // 轮播图组件
      swiperOption: {
        loop: "true",
        slidesPerView: 4,
        centeredSlides: true,
        spaceBetween: 30,
        direction: "horizontal",
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          resize: () => {
            this.$refs.swiper.$swiper.changeDirection(
              window.innerWidth <= 960 ? "vertical" : "horizontal"
            );
          },
        },
      },

    };
  },
};
</script>

<style lang="scss" scoped>
.hilton-index {
  user-select: none;

  // 首页第一层视频及内部文字样式
  .hilton_index_video {
    position: relative;

    .index_video {
      width: 100%;
      margin: auto;
      video {
        width: 100%;
        height: 100%;
      }
    }

    .hilton_index_title {
      color: white;
      position: absolute;
      left: 5%;
      bottom: 20%;
      color: #fff;

      span {
        font-size: 18px;
        font-style: italic;
        letter-spacing: 3px;
      }

      h1 {
        font-size: 44px;
        margin: 15px 0;
      }

      p {
        font-size: 12px;
        margin-bottom: 10px;
        letter-spacing: 3px;
      }

      .hilton_index_video_text {
        span {
          font-style: normal;
          font-size: 12px;
          border-bottom: 1px solid #fff;
          padding-bottom: 3px;
          margin-right: 8px;
          font-weight: bold;
          cursor: pointer;

          &:hover {
            color: #989898;
            border-bottom: 1px solid #989898;
            transition: all 1s;
          }
        }
      }
    }
  }

  //探索更多
  .explore_more {
    width: 80%;
    margin: auto;
    text-align: center;
    span {
      display: inline-block;
      margin: 20px 0;
      font-size: 12px;
      letter-spacing: 10px;
    }
  }


  //文字介绍
  .index_introduce {
    width: 80%;
    margin: 0px auto;
    height: 200px;
    position: relative;
    p {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24px;
    }

    div {
      position: absolute;
      top: 35%;
      left: 50%;
      line-height: 30px;
      transform: translateX(-50%);
      width: 60%;
      margin: auto;
      font-size: 15px;
      text-align: center;
    }
  }

  //轮播图
  .swiper {
    padding-bottom: 70px;

    .swiper-slide {
      overflow: hidden;
      height: 400px;

      .index_carousel {
        img {
          width: 200%;
        }

        .swiper_title {
          span {
            display: inline-block;
            width: 100%;
            text-align: center;
            padding-bottom: 10px;
          }
        }
      }

      &.swiper-slide-active {
        transition: all 0.5s;
        transform: scale(1.1);
        box-shadow: 0px 0px 10px black;
        height: 400px;

        img {
          width: 100%;
        }
        .swiper_title {
          padding: 20px 0;

          span {
            display: inline-block;
            width: 100%;
            text-align: center;
            padding-bottom: 10px;
          }

          p {
            padding: 0 15px;
            height: 80px;
            overflow: hidden;
            line-height: 20px;
            text-overflow: ellipsis;
          }
        }

        .swiper_price {
          display: flex;
          justify-content: space-evenly;
          margin-bottom: 20px;

          span {
            letter-spacing: 3px;
            width: 35%;
            text-align: center;
            margin-top: 10px;
            padding: 10px 0;
            display: inline-block;
            border: 1px solid black;
            background-color: #444;
            color: #fff;

            &:last-child {
              border: 1px solid #000;
              background-color: white;
              color: #000;
            }
          }
        }
      }
    }
  }
}
 //特色体验
  .experience{
    display: flex ;
    margin-left: 30px;
    margin-right: 30px;
    // margin-bottom: 30px;
    background-color: lightgrey;
  }
  .experience_img{
    width: 100%;
  
  }
    .experience_title {
      padding-top: 300px;
      margin-left: 50px;
      display: flex;
      justify-content: space-between;

      div:first-child {
        width: 70%;

        span {
          display: inline-block;
          font-style: italic;
          font-size: 18px;
          margin-bottom: 10px;
        }
        h2 {
          font-size: 24px;
          margin: 5px 0 10px 0;
          letter-spacing: 10px;
          font-weight: 100;
        }
        p {
          font-size: 15px;
          line-height: 30px;
          margin-bottom: 20px;
        }
      }

      div:nth-child(2) {
        width: 20%;
        position: relative;
        span {
          display: inline-block;
          font-size: 12px;
          text-align: center;
          position: absolute;
          bottom: 10%;
          left: 20%;
          border-bottom: 1px solid black;
          letter-spacing: normal;
          padding-bottom: 5px;
        }
      }
    }

</style>
